<template>
  <div>
    <Breadcrumb :titles="pathTitles"></Breadcrumb>
    <el-card>
      <div>
        <div class="content-top">

          <el-button type="primary" @click="clickAddCategory">添加分类</el-button>
        </div>

        <el-table
          :data="categorys"
          row-key="cat_id"
          border
          :tree-props="{children: 'children'}">
          <el-table-column
            type="index"
            label="#"
            width="180"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column
            prop="cat_name"
            label="分类名"
          >
          </el-table-column>
          <el-table-column
            prop="cat_level"
            label="级别">
            <template slot-scope="{row}">
              <el-tag :type="levelType(row.cat_level)[0]">{{levelType(row.cat_level)[1]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="warning" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[5, 10, 30]"
        :page-size="pagination.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">

      </el-pagination>
    </el-card>
    <el-dialog
      title="添加分类"
      :visible.sync="addCategoryDialogVisible"
      width="680px"
      :before-close="dialogBeforeClose"
    >
      <el-form
        ref="categoryDialogForm"
        :model="categoryData">
        <el-form-item label-width="80px" label="分类名称" prop="cat_name">
          <el-input placeholder="分类名称" v-model="categoryData.username">
          </el-input>
        </el-form-item>
        <el-form-item label-width="80px" label="级别">
          <el-cascader
            ref="categoryCascader"
            clearable
            v-model="categorySuperLevel"
            :options="allCategorys"
            :props="{ expandTrigger: 'hover',value: 'cat_id',label:'cat_name',checkStrictly:true}"
            @change="categoryCascaderHandleChange"

          >

          </el-cascader>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

  import getPathTitleMixin from "mixin/getPathTitleMixin";

  import Breadcrumb from 'components/content/Breadcrumb';

  import {getCategorys} from "../../../network/goodsRequest/GoodsRequest";

  export default {
    name: "CategoryList",
    mixins:[getPathTitleMixin],
    components:{

      Breadcrumb
    },
    data:function(){

      return {
        categorys:[],
        pagination:{
          page:1,
          pagesize:10,
          total:0
        },
        addCategoryDialogVisible:false,
        categoryData:{

          cat_name:null
        },
        categorySuperLevel:[],
        allCategorys:null
      }
    },
    created() {

      this.loadCategorys();
    },
    methods:{

      async loadCategorys(){

        try {

          let result  = await getCategorys({
            page: this.pagination.page,
            pagesize: this.pagination.pagesize
          });

          this.categorys = result.data;
          this.pagination.total = result.total;

        }catch (e) {

        }

      },
      indexMethod(index){

        // console.log(index,index01);

        return index + 1;
      },
      levelType(level){

        if (level == 0){

          return ['success','一级'];
        }else if(level == 1){

          return  ['warning','二级'];
        }else {

          return  ['danger','三级'];
        }

      },
      handleSizeChange(size){

        this.pagination.pagesize = size;

        this.loadCategorys();
      },
      handleCurrentChange(page){

        this.pagination.page = page;
        this.loadCategorys();
      },
      dialogBeforeClose(){

        this.categorySuperLevel = [];
        this.addCategoryDialogVisible = false;

      },
      async clickAddCategory(){


        try {

          if (this.allCategorys == null){

            this.allCategorys = await getCategorys({
              type:2
            });
            console.log(this.allCategorys);
          }

          this.addCategoryDialogVisible = true

        }catch (e) {

        }

      },
      categoryCascaderHandleChange(){


        console.log(this.categorySuperLevel);
      }
    }
  }
</script>

<style scoped>

  .content-top{

    margin-bottom: 20px;
  }

  .el-pagination{
    margin-top: 20px;
  }

</style>
